<template lang="">
    <div class='regist-box'>
        <div class='conte-box'>
            <div class='input-box'>
               <div class='input-text'>智能XX综合管理系统注册</div>
               <el-input
                 v-model="from.name"
                 class="responsive-input"
                 placeholder="请输入用户名"
                 :prefix-icon="Avatar"
                    />
                    <el-input
                    type='password'
                 v-model="from.pas"
                 class="responsive-input"
                 placeholder="请输入密码"
                 :prefix-icon="Lock"
                    />
                   
                      <el-input
                    type='password'
                 v-model="from.pas1"
                 class="responsive-input"
                 placeholder="确认密码"
                 :prefix-icon="Lock"
                    />
                     <el-input
                       class="responsive-input"
                      v-model="from.code"
                      style="max-width: 600px"
                       placeholder="Please input"
                          >
                         <template #append>
                            <img :src="`${imgsrc}?${codeKey}`"></img>
                         </template>
                            </el-input>
                 <el-button type="primary" class='btn' @click='submite()'>注册</el-button>
            </div>
        </div>
        <img src='/img/1.png' class='bg'>
    </div>
</template>
<script lang="ts">
import {  Avatar } from '@element-plus/icons-vue'
import {  Lock } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import 'element-plus/theme-chalk/el-notification.css'
import axios from 'axios'
import { log } from 'echarts/types/src/util/log.js'
import { regist } from '@/api/users'
const imgsrc = '/api-server/users/captcha'
// import router from '@/router'
export default {
    
    data(){
        return {
            Lock,
           Avatar,
           codeKey:0,
           imgsrc:'/api-server/users/captcha',
             from:{
                name:'',
                pas:'',
                pas1:'',
                
                code:''
             }
        }
       
    } ,
    methods: {
            submite(){
               const res = Object.values(this.from)
               let status = true
               res.map(val => status = !!val)
               if(!status){
                    ElNotification({
                      title: '错误',
                      message: '不可为空123',
                      type: 'error',
                  })
                  
                  return;
               }
              
               
               
                  const { pas, pas1,name,code} = this.from
                  if(pas !== pas1){
                     ElNotification({
                           title: '错误',
                            message: '密码和确认密码必须一致',
                         type: 'error',
                   })
                  }
                  regist({username:name,
                         password:pas,
                        code:code})
                //   axios({
                //     url:'/api-server/users/register',
                //     method:'post',
                //     data:{
                //         username:name,
                //         password:pas,
                //         code:code
                //     }
                //   }).then(res => {
                //       const {code} = res.data
                     
                //       if( code !==200){
                //                ElNotification({
                //         title: '错误',
                //         message: res.data.message,
                //         type: 'error',
                //     })
                //   this.codeKey ++
                //   return;
                //    }
                //    ElNotification({
                //         title: '注册成功',
                //         message: res.data.message,
                //         type: 'success',
                //     })
                //    this.$router.push({
                //      path:'/login'
                //    })
                //   })                  

            }
        },
}
</script>
<style lang="scss" scoped>
    .regist-box{
        // background-color: aqua;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: flex-end;
        .conte-box{
            width: 735px;
	        
	        background-color: #f5f6f8;
	        border: solid 1px #faffff;
            // background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
            .input-box{
                width: 400px;
                height: 460px;
                // background-color: aqua;
                .input-text{
                    text-align: center;
                      width: 368px;
	                 
	                 font-family: SourceHanSansSC-Bold;
	                 font-size: 35px;
	                 font-weight: normal;
	                  font-stretch: normal;
	                 letter-spacing: 0px;
	                 color: #090909;
                }
             .responsive-input{
                width: 380px;
	           
	            background-color: #ffffff;
	           border-radius: 5px;
	           border: solid 2px #0f53c5;
               margin-top: 50px;
             }
             .btn{
                width: 100%;
                margin-top: 40px;
             }
            }
        }
        .bg{
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: -1;
        }
    }
</style>